<template>
  <div>
    <div>
      <el-container>
        <el-header class="LoGo">
          <div class="LoGo_left">
            <div class="LG">
              <img @click="Tohome" src="../../assets/newimg/logo.png"
                style="width: 148px; height: 65px; cursor: pointer" />
            </div>
            <div>
              <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" :ellipsis="false"
                style="height: 4.375rem" router>
                <el-menu-item index="/">
                  <el-icon>
                    <img src="../../assets/img/home.png" class="i_icon" />
                  </el-icon>
                  <span style="color: #000 !important">首页</span>
                </el-menu-item>

                <el-menu-item index="/search">
                  <el-icon>
                    <img src="../../assets/img/路径 33@2x.png" class="i_icon" />
                  </el-icon>
                  <span style="color: #000 !important">搜索</span>
                </el-menu-item>
                <el-menu-item index="/head">
                  <el-icon>
                    <img src="../../assets/img/路径 4087@2x.png" class="i_icon" />
                  </el-icon>
                  <span style="color: #000 !important">工作台</span>
                </el-menu-item>
              </el-menu>
            </div>
          </div>
          <div class="LoGo_right">
            <div>
              <img src="../../assets/img/喇叭.png" alt="" style="width: 1.625rem; height: 1.75rem" />
            </div>
            <div>
              <img src="../../assets/img/user.png" alt="" style="
                  width: 2.25rem;
                  height: 2.25rem;
                  margin: 0 0.625rem 0 2.25rem;
                " v-if="vip" />
            </div>
            <div class="fs16" style="margin: 0 0.375rem 0 0.625rem" v-if="vip">
              {{ account }}
            </div>

            <div>
              <el-dropdown :hide-on-click="true" trigger="click">
                <span class="el-dropdown-link">
                  <img src="../../assets/img/xia.png" style="
                      width: 12px;
                      height: 8px;
                      margin-left: 6px;
                      cursor: pointer;
                    " />
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item @click="exit">退出</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <div style="border: 1px solid #eee"></div>

        <el-container>
          <el-aside width="150px">
            <el-menu default-active="1" class="el-menu-vertical-demo" router>
              <el-menu-item index="/head">
                <el-icon>
                  <img src="../../assets/img/首页.png" class="i_icon" />
                </el-icon>

                <span>首页</span>
              </el-menu-item>
              <el-menu-item index="/subscribe">
                <el-icon>
                  <img src="../../assets/img/订阅.png" class="i_icon" />
                </el-icon>
                <span>订阅与收藏</span>
              </el-menu-item>
              <el-menu-item index="/service">
                <el-icon>
                  <img src="../../assets/img/fuwu.png" class="i_icon" />
                </el-icon>
                <span>服务</span>
              </el-menu-item>

              <el-menu-item index="/stagingSetup">
                <el-icon>
                  <img src="../../assets/img/shezhi.png" class="i_icon" />
                </el-icon>
                <span>设置</span>
              </el-menu-item>

              <el-menu-item index="/Myrecords">
                <el-icon>
                  <img src="../../assets/img/shezhi.png" class="i_icon" />
                </el-icon>
                <span>操作记录</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import "../../assets/com/com.scss";
import { storeToRefs } from "pinia";
import { useCounterStore } from "../../pain/login/login";
import router from "../../router";
const activeIndex = ref("4");
import { userInfo } from '@/Api/api.js'

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
// 图片显示隐藏
const store = useCounterStore();
const { vip } = storeToRefs(store);
const { userLogin } = storeToRefs(store);
onMounted(() => {
  const token = localStorage.getItem("token");
  if (token) {
    vip.value = true;
  } else {
    vip.value = false;
  }
});
import CryptoJS from "crypto-js";
const key = CryptoJS.enc.Utf8.parse("ysh425ptjhcpo781"); //十六位十六进制数作为密钥偏移量
const iv = CryptoJS.enc.Utf8.parse('53c5a64c6be84e97'); //十六位十六进制数作为密钥偏移量
const token = localStorage.getItem("token");
//解密
function decrypt(text) {
  var result = CryptoJS.AES.decrypt(text, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return result.toString(CryptoJS.enc.Utf8)
}
const account = ref('')
if (token) {
  userInfo().then(rex => {
    account.value = rex.data.data.account
  })
}

//跳转首页
const Tohome = () => {
  router.push("/");
};

// 退出
const exit = () => {
  localStorage.removeItem("token");
  vip.value = false;
  userLogin.value = true;
  router.push("/");
};
</script>

<style lang="scss" scoped>
.el-menu-item:hover {
  background: url(../../assets/img/hover.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 0.625rem;
  color: #fff;
}

:deep(.el-menu-vertical-demo[data-v-5b5686de]) {
  height: 100vh;
}

.el-header {
  // width: 120rem;
  height: 4.375rem;
  // border-bottom: 1px solid #eeee;
}

.el-main {
  padding: 0 !important;
  margin: 0;
}

.LoGo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;

  .LoGo_left {
    display: flex;
    align-items: center;

    .LG {
      width: 9.375rem;
      height: 4.375rem;
      // background: #818181;
      opacity: 1;
      border-radius: 0px;
      line-height: 4.375rem;
      text-align: center;
      color: #fff;
    }
  }

  .LoGo_right {
    display: flex;
    align-items: center;
    margin-right: 20px;
  }
}

.el-menu-vertical-demo {
  background-color: #1c294c;
  // height: calc(100vh - 70px);
  height: 138vh;
}

span {
  color: #fff !important;
}
</style>
